Add Javascript and TypeScript build for jetpack-wpcom-mu #34158

daledupreez · 2023-11-16T09:06:59Z

Proposed changes:

This PR adds initial Javascript and TypeScript build logic for the jetpack-mu-wpcom package.
The build logic relies on webpack and Jetpack's default Webpack configuration
The PR folds in the work from Jetpack Mu WPcom: Migrate Error Handling #34159 to build the code from src/features/error-reporting, a project we want to migrate from the Editing Toolkit Plugin in https://github.com/Automattic/wp-calypso/tree/05bbf6a425badcdc73cc9ff27c0fc418c018fb2b/apps/editing-toolkit

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

No product changes for now -- we simply want to prepare for pulling more features from the WordPress.com Editing Toolkit plugin so they're available in a single location across WordPress.com Simple and Atomic.

Does this pull request change what data or activity we track or use?

No changes to data or activity tracking.

Testing instructions:

Local testing

Check out this branch locally
Run pnpm i
Run pnpm run build-js
Verify that you get JS output in src/build/error-reporting/error-reporting.js, and that you get src/build/error-reporting/error-reporting.asset.php and src/build/error-reporting/error-reporting.js.map produced
Run pnpm run build-production-js
Verify that src/build/error-reporting/ now only contains error-reporting.js (which should be minified) and error-reporting.asset.php

Functional testing - WordPress.com Simple

On a WordPress.com sandbox, run bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/js-build-for-jetpack-wpcom-mu (as documented in this comment) to apply this code to your sandbox
Ensure that requests for both s0.wp.com and your development site are routed via your WordPress.com sandbox
Add the following lines to your 0-sandbox.php file to force file concatenation and :

define( 'FORCE_CONCAT', TRUE );
add_filter( 'wpcom_sandbox_staticize_subdomain', '__return_true' );

From a command line on your sandbox, run the following command to add the error-reporting-use-sentry sticker to your site: wp blog-stickers add --blog_id=[YOUR_BLOG_ID] --sticker=error-reporting-use-sentry --who=[YOUR_USERNAME]
Navigate to /wp-admin/edit.php for your test site
Click on "Edit" for one of your posts (or create a new one if you need to)
Verify that you are viewing the post editor via /wp-admin/post.php (i.e. we want to make sure you're not viewing the post editor via wordpress.com/post/)
Open up the developer console, and enter the following code in the console:

var testETK = document.createElement('script');
testETK.innerHTML = "throw new Error('ETK - hi there!');";
document.body.appendChild( testETK );

Check your network tab and verify that we make an HTTP request to a subdomain of sentry.io
Now disable the ETK code on your sandbox by commenting out the following function call in wp-content/plugins/editing-toolkit-plugin/prod/error-reporting/index.php:

if ( is_site_eligible_for_error_reporting() ) {
	//setup_error_reporting();
}

Reload your editor page
Verify that the HTML source for the editor page includes a script with the following source: https://s0.wp.com/wp-content/mu-plugins/jetpack-mu-wpcom-plugin/moon/vendor/automattic/jetpack-mu-wpcom/src/build/error-reporting/error-reporting.js
Open up the developer console, and enter the following code in the console:

var testJetpackMuWPCOM = document.createElement('script');
testJetpackMuWPCOM.innerHTML = "throw new Error('JPMUWPCOM - hi there!');";
document.body.appendChild( testJetpackMuWPCOM );

Check your network tab and verify that we make an HTTP request to a subdomain of sentry.io

Functional testing - WPCOM Atomic

Ensure you have the Jetpack Beta plugin installed on your Atomic site. (You can download the current version from https://jetpack.com/download-jetpack-beta/.)
Navigate to Jetpack -> Beta Tester in the left nav on your site
Click on the "Manage" button for the WordPress.com Features item
Type add/js-build-for-jetpack-wpcom-mu in the search field, and then click "Activate" for the version from this branch
Follow the instructions in this comment to run the code from the beta plugin
Navigate to /wp-admin/edit.php for the test site
Click on "Edit" for one of your posts (or create a new one if you need to)
- Open up the developer console, and enter the following code in the console:

var testETK = document.createElement('script');
testETK.innerHTML = "throw new Error('ETK - hi there!');";
document.body.appendChild( testETK );

Check your network tab and verify that we did not make an HTTP request to a subdomain of sentry.io - we don't have this feature enabled for Atomic sites at this time

github-actions · 2023-11-16T09:08:04Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for December 5, 2023 (scheduled code freeze on November 28, 2023).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Mu Wpcom plugin:

Next scheduled release: January 2, 2024.
Scheduled code freeze: December 25, 2023.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

First pass at migrating an ETK feature. Will need to be rebased once we have script building available.

github-actions · 2023-11-16T09:36:48Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/js-build-for-jetpack-wpcom-mu branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/js-build-for-jetpack-wpcom-mu

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/js-build-for-jetpack-wpcom-mu

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

…m/Automattic/jetpack into add/js-build-for-jetpack-wpcom-mu

obenland · 2023-11-16T14:52:37Z

I did a functional test following the instructions in #54257 and it looks like it works as expected. The only thing I noticed missing was the assets file that contains dependencies etc

okmttdhr · 2023-11-16T16:23:03Z

I'm just done with Local testing, and that worked well :)

okmttdhr

I did Functional testing on Simple and Atomic site, and it worked well! 🎉 Thank you so much for your work.

📝

I also merged trunk into this branch.
The assets was served by <script crossorigin="anonymous" type="text/javascript" src="https://s0.wp.com/_static/??-eJx9T0kOwjAM/BDGLUIgDoi3uIlVUppFjkN5PhFFCIrgZs/iGeOUwMSgHBTJehcgjaV3IaNn6wj4lsYoLJCVNK+HvMI3hy8v+WzuSNBTVpY6gQqZyz/TwJqqBCo0JRP9k8BcAl452ChIRaMnVWe+1JjFYFfcaJFFooBwiqIu9Mt9WeHz0zn6URZm5sxj+gHXUyd/bPdN024Pu81muANc1ni8"></script> in my case.

okmttdhr · 2023-11-24T01:55:44Z

projects/packages/jetpack-mu-wpcom/src/features/error-reporting/error-reporting.php

+/**
+ * Temporary function to feature flag Sentry by segment.
+ *
+ * We'll be testing it on production (simple sites) for a while to see if it's feasible to
+ * activate it for all sites and perhaps get rid of our custom solution. If it works well,
+ * we'll activate for all simple sites and look into activating it for WoA, too.
+ *
+ * @param int $user_id The user id.
+ * @return bool
+ */
+function wpcom_user_in_sentry_test_segment( $user_id ) {
+	$current_segment = 10; // Segment of existing users that will get this feature in %.
+	$user_segment    = $user_id % 100;
+
+	/*
+	 * We get the last two digits of the user id and that will be used to decide in what
+	 * segment the user is. i.e if current_segment is 10, then only ids that end in < 10
+	 * will be considered part of the segment.
+	 */
+	return $user_segment < $current_segment;
+}


Am I correct in understanding that this feature is disabled because user_id on Atomic is not linked to WordPress.com? I'm asking for my learning purposes 🙂 @daledupreez @obenland
PCYsg-Ewq-p2

@okmttdhr, I think that @fullofcaffeine is best-placed to comment on why we're only running this on WPCOM Simple and haven't rolled the functionality out more broadly.

Hi @okmttdhr! Yes, it's not running on AT. The original plan is to run on AT at some point, and we tried - see p4TIVU-9DI-p2#comment-10922 - but there were some problems. At the time, though, we hadn't implemented Sentry yet, and Sentry should work fine on AT, too. The challenge, though is how to treat errors from AT as AT is the wild west :D - sites can run all sorts of third-party code - so we should have a RFC before proceeding, and Sentry atm is not top-priority for WPCOM, AFAIK.

alshakero · 2023-11-28T15:49:36Z

Hi Dale! We're really excited about moving Verbum into this. Do you have an idea when it will be deployed?

daledupreez · 2023-11-28T19:14:18Z

@alshakero, we're currently blocked on a functional review of the Sentry code by @fullofcaffeine.

@fullofcaffeine, can you try to prioritise the review so we can start work on our next migrations that depend on the build code in this PR?

fullofcaffeine · 2023-12-02T00:02:33Z

@daledupreez Hi! I'm checking this out now; sorry for the delay, had a busy week.

fullofcaffeine

LGMT, and tests well! I also tested logstash capture (when Sentry is disabled) and it works great. The negative scenario for AT also tests well.

Now that this will live in the jetpack-wpcom-mu, where can I find more info about deploying it on my own? Or will I need to coordinate JP release with the JP folks?

The only missing piece will be to remove the error-reporting-module from ETK - let me know if you need a hand there. I think we could ship it just after shipping this one.

Thanks!

daledupreez · 2023-12-02T08:42:43Z

Thanks for testing and taking a look, @fullofcaffeine!

Now that this will live in the jetpack-wpcom-mu, where can I find more info about deploying it on my own? Or will I need to coordinate JP release with the JP folks?

At present, jetpack-mu-wpcom is deployed to WordPress.com Simple once a day, and to WordPress.com Atomic once a week. It's also possible to release separately to both platforms. We have a lot more documentation about the release process and development worklow here: PCYsg-Osp-p2

The only missing piece will be to remove the error-reporting-module from ETK - let me know if you need a hand there. I think we could ship it just after shipping this one.

That's my plan -- I'll aim to get this PR shipped on Monday and get the removal PR going then as well.

miksansegundo

🚀

daledupreez added the [Status] In Progress label Nov 16, 2023

daledupreez requested review from mattwiebe, obenland, miksansegundo and okmttdhr November 16, 2023 09:06

daledupreez self-assigned this Nov 16, 2023

github-actions bot added the [Package] Jetpack mu wpcom WordPress.com Features label Nov 16, 2023

obenland added 2 commits November 16, 2023 10:08

Jetpack Mu WPcom: Migrate Error Handling

12335c0

First pass at migrating an ETK feature. Will need to be rebased once we have script building available.

Update script paths

9159934

daledupreez added 6 commits November 16, 2023 11:42

Add initial JS build code for jetpack-mu-wpcom

5900f65

changelog

2f9d0c3

Loosen dependencies

56441c4

Add build/ to .gitignore

102379d

Add clean script

de56417

Add dependencies for error-reporting

5135060

daledupreez force-pushed the add/js-build-for-jetpack-wpcom-mu branch from 5d9de77 to 5135060 Compare November 16, 2023 09:44

github-actions bot added the [mu wpcom Feature] Error Reporting label Nov 16, 2023

daledupreez added 2 commits November 16, 2023 11:52

Update versions

6f90e42

Changelog

e1a1b30

github-actions bot added the [Plugin] mu wpcom jetpack-mu-wpcom plugin label Nov 16, 2023

obenland mentioned this pull request Nov 16, 2023

Jetpack Mu WPcom: Migrate Error Handling #34159

Closed

3 tasks

daledupreez and others added 4 commits November 16, 2023 12:07

Add build scripts

1934951

Try using PKG_DIR

aa4ff50

Add build/ directory to production output

e9498ed

Import namespaced class

9c210ab

arthur791004 mentioned this pull request Nov 16, 2023

Add TypeScript build for mu-wpcom #33459

Closed

3 tasks

obenland added 2 commits November 16, 2023 13:41

Merge branch 'add/js-build-for-jetpack-wpcom-mu' of https://github.co…

55f4420

…m/Automattic/jetpack into add/js-build-for-jetpack-wpcom-mu

Bail early if ETK has enqueued its script

bcf0831

obenland added 2 commits November 16, 2023 15:51

Add trailing slash

882158e

Merge branch 'add/js-build-for-jetpack-wpcom-mu' of https://github.co…

348f3c4

…m/Automattic/jetpack into add/js-build-for-jetpack-wpcom-mu

Update build docs

1696a90

daledupreez requested a review from fullofcaffeine November 16, 2023 16:41

daledupreez mentioned this pull request Nov 16, 2023

WIP: add launchpad navigator to jetpack-mu-wpcom #33045

Closed

11 tasks

daledupreez added [Status] Needs Team Review and removed [Status] In Progress labels Nov 16, 2023

okmttdhr previously approved these changes Nov 24, 2023

View reviewed changes

Merge branch 'trunk' into add/js-build-for-jetpack-wpcom-mu

519deda

okmttdhr dismissed their stale review via 519deda November 24, 2023 02:14

okmttdhr force-pushed the add/js-build-for-jetpack-wpcom-mu branch from e77f92a to 519deda Compare November 24, 2023 02:14

okmttdhr previously approved these changes Nov 24, 2023

View reviewed changes

okmttdhr mentioned this pull request Nov 29, 2023

☂️ PT: Live Preview in Premium and WooCommerce Themes Automattic/wp-calypso#79223

Closed

27 tasks

fullofcaffeine previously approved these changes Dec 2, 2023

View reviewed changes

Merge branch 'trunk' into add/js-build-for-jetpack-wpcom-mu

7dbc2d0

okmttdhr dismissed stale reviews from fullofcaffeine and themself via 7dbc2d0 December 4, 2023 07:48

okmttdhr added 2 commits December 4, 2023 17:02

Update pnpm-lock.yaml

5ae7897

Update composer.lock

5e1e8c8

miksansegundo approved these changes Dec 4, 2023

View reviewed changes

daledupreez merged commit 115f228 into trunk Dec 4, 2023
64 checks passed

daledupreez deleted the add/js-build-for-jetpack-wpcom-mu branch December 4, 2023 10:26

github-actions bot removed the [Status] Needs Team Review label Dec 4, 2023

daledupreez mentioned this pull request Dec 4, 2023

Remove error-reporting module and loader from ETK Automattic/wp-calypso#84811

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Javascript and TypeScript build for jetpack-wpcom-mu #34158

Add Javascript and TypeScript build for jetpack-wpcom-mu #34158

daledupreez commented Nov 16, 2023 •

edited

Loading

github-actions bot commented Nov 16, 2023 •

edited

Loading

github-actions bot commented Nov 16, 2023 •

edited

Loading

obenland commented Nov 16, 2023

okmttdhr commented Nov 16, 2023

okmttdhr left a comment •

edited

Loading

okmttdhr Nov 24, 2023 •

edited

Loading

daledupreez Nov 24, 2023

fullofcaffeine Dec 2, 2023

alshakero commented Nov 28, 2023

daledupreez commented Nov 28, 2023

fullofcaffeine commented Dec 2, 2023

fullofcaffeine left a comment •

edited

Loading

daledupreez commented Dec 2, 2023

miksansegundo left a comment

Add Javascript and TypeScript build for jetpack-wpcom-mu #34158

Add Javascript and TypeScript build for jetpack-wpcom-mu #34158

Conversation

daledupreez commented Nov 16, 2023 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Local testing

Functional testing - WordPress.com Simple

Functional testing - WPCOM Atomic

github-actions bot commented Nov 16, 2023 • edited Loading

github-actions bot commented Nov 16, 2023 • edited Loading

obenland commented Nov 16, 2023

okmttdhr commented Nov 16, 2023

okmttdhr left a comment • edited Loading

Choose a reason for hiding this comment

okmttdhr Nov 24, 2023 • edited Loading

Choose a reason for hiding this comment

daledupreez Nov 24, 2023

Choose a reason for hiding this comment

fullofcaffeine Dec 2, 2023

Choose a reason for hiding this comment

alshakero commented Nov 28, 2023

daledupreez commented Nov 28, 2023

fullofcaffeine commented Dec 2, 2023

fullofcaffeine left a comment • edited Loading

Choose a reason for hiding this comment

daledupreez commented Dec 2, 2023

miksansegundo left a comment

Choose a reason for hiding this comment

daledupreez commented Nov 16, 2023 •

edited

Loading

github-actions bot commented Nov 16, 2023 •

edited

Loading

github-actions bot commented Nov 16, 2023 •

edited

Loading

okmttdhr left a comment •

edited

Loading

okmttdhr Nov 24, 2023 •

edited

Loading

fullofcaffeine left a comment •

edited

Loading